<template>
    <div class="verification-form">
        <el-form :model="form" label-width="80px">
            <el-form-item label="电话">
                <div class="code-input">
                    <el-input v-model="form.mobile" placeholder="请输入电话"></el-input>
                    <el-button type="primary" @click="generateCode">生成</el-button>
                </div>
            </el-form-item>
            <el-form-item label="验证码">
                <div class="code-input">
                    <el-input v-model="form.code" placeholder="生成的验证码" readonly></el-input>
                    <el-button @click="copyCode">复制</el-button>
                </div>
            </el-form-item>
            <el-form :model="global" label-width="80px">
                <el-form-item label="人工客服">
                    <el-switch v-model="global.customerSerSwitch" @change="changeServiceSwitch" />
                </el-form-item>
                <!-- 账号登陆，手机号注册 -->
                <!-- 开关两边展示文字 -->
                <el-switch v-model="global.accountRegSwitch" @change="changeAccountLogin" active-text="账号注册"
                    inactive-text="手机注册" />
            </el-form>

            <!-- 加条分割线 中间加文字 -->
            <el-divider content-position="center">搜索栏</el-divider>
        </el-form>
        <avue-crud style="height: 78vh;" ref="userRef" :table-loading="tableLoading" :option="option"
            @refresh-change="getList" :data="data" :page="page" @size-change="sizeChange"
            @current-change="currentChange" @search-change="searchChange" @search-reset="searchReset">
            <template #menu="{ row, index, size }">
                <el-button type="primary" text @click="userDetail(row)">重新获取</el-button>

            </template>
        </avue-crud>
    </div>

</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import user from "@/options/userCtl/userReg";
import { ElMessageBox, ElMessage } from "element-plus";
import {
    getUserInfo,
    getUserFlow,
    add_phonecode,
    get_phonecodelist,
    editGlobalFundSet,
    getGlobalFundSet
} from "@/apis/admin";
const form = reactive({
    mobile: '',
    code: ''
})

const global = ref({
    customerSerSwitch: false,
    accountRegSwitch: false,
    firstRechargePoint: 0,
    registerPoint: 0,
    minRecharge: 0,
    minWithdraw: 0,
    isAutoWithdraw: false,
    payMaintain: false,
    autoWithdraw: 0,
    spinCost: 0,
    autoDayWithdraw: 0,
    gameWinRate: 0
})





const flowUserId = ref("");

const detailVisible = ref(false);


onMounted(() => {
    getList();
    getGlobal();
});
const getGlobal = async () => {
    const res = await getGlobalFundSet.get("", {});
    global.value = res.data;
    global.value.customerSerSwitch = res.data.customerSerSwitch == 1 ? true : false;
    global.value.accountRegSwitch = res.data.accountRegSwitch == 1 ? true : false;
    console.log(global.value);
}
const changeServiceSwitch = async () => {
    console.log(global.value.customerSerSwitch ? 1 : 0);
    let serviceSwitch = global.value.customerSerSwitch ? 1 : 0;
    const res = await editGlobalFundSet.post("", {
        ...global.value,
        accountRegSwitch: global.value.accountRegSwitch ? 1 : 0,
        customerSerSwitch: serviceSwitch,
    });
    if (res.code == 200) {
        ElMessage.success("设置成功");
    }
}
const changeAccountLogin = async () => {
    console.log(global.value.accountRegSwitch ? 1 : 0);
    let accountLogin = global.value.accountRegSwitch ? 1 : 0;
    const res = await editGlobalFundSet.post("", {
        ...global.value,
        accountRegSwitch: accountLogin,
        customerSerSwitch: global.value.customerSerSwitch ? 1 : 0,
    });
    if (res.code == 200) {
        ElMessage.success("设置成功");
    }

}
const searchChange = (form, done) => {
    page.searchInfo = form;
    page.currentPage = 1;
    getList();
    done();
};
const searchReset = () => {
    page.searchInfo = {};
    page.currentPage = 1;
    getList();
};

const detail_data = ref({});

const userDetail = (data) => {
    tableLoading.value = true;
    // getUserInfo.post("", {
    //     userId: data.userId
    // }).then((res) => {
    //     tableLoading.value = false;
    //     ElMessage.success("验证码已续杯");
    //     detail_data.value = res.data;
    //     detailVisible.value = true;
    // })
    flowUserId.value = data.userId;

    tableLoading.value = true;
    // Simulate code generation
    add_phonecode.post("", {
        phone: data.phone
    }).then((res) => {
        tableLoading.value = false;
        if (res.code == 200) {
            getList();
            ElMessage.success("验证码已生成！");
        }
    })
};

const option = user;
const page = reactive({
    total: 0,
    searchInfo: {},
    currentPage: 1,
    pageSize: 10,
});
const sizeChange = (val) => {
    page.pageSize = val;
    getList();
};
const currentChange = (val) => {
    page.currentPage = val;
    getList();
};
const data = ref([]);
const tableLoading = ref(false);
const getList = async () => {
    tableLoading.value = true;
    const res = await get_phonecodelist.post("", {
        page: page.currentPage,
        pageSize: page.pageSize,
        searchInfo: page.searchInfo,
    });
    tableLoading.value = false;
    if (res.code == 200) {
        page.total = res.data.total;
        data.value = res.data.list || [];
    }
};


const copyCode = async () => {
    let text = form.code;
    let success = false;
    if (navigator.clipboard && window.isSecureContext) {
        // 使用新的 API
        try {
            await navigator.clipboard.writeText(text);
            success = true;
        } catch (err) {
            console.error("Failed to copy using navigator.clipboard: ", err);
        }
    }

    if (!success) {
        // 使用 document.execCommand 作为回退方法
        const textArea = document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            document.execCommand('copy');
            success = true;
        } catch (err) {
            console.error("Failed to copy using execCommand: ", err);
        }

        document.body.removeChild(textArea);
    }
};

const generateCode = () => {
    tableLoading.value = true;
    // Simulate code generation
    add_phonecode.post("", {
        phone: form.mobile
    }).then((res) => {
        console.log(res);
        tableLoading.value = false;
        if (res.code == 200) {
            form.code = res.data.verCode;
            ElMessage.success("验证码已生成！");
            getList();
        }
    })

};
</script>
<style lang="scss" scoped>
.subtitle {
    width: 100%;
    border-radius: 4px;
    background: #f5f5f5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 10px 0;
}

.label {
    color: #666;
    font-size: 12px;
    padding-right: 8px;
}

.value {
    color: #333;
    font-size: 13px;
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;
    overflow: auto;
}

.verification-form {
    width: 100%;
}

.code-input {
    display: flex;
    align-items: center;
}

.code-input .el-input {
    flex: 1;
}

.code-input .el-button {
    margin-left: 10px;
}
</style>